{% extends 'base.html' %}
{%block title%}
    {{ articles.title }}
{%endblock%}

{% block head %}
    {{ super() }}
    {{ moment.include_moment() }}
    {{ moment.lang("zh-CN") }}
{% endblock %}

{% block style %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/detail_index.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap_base.css') }}">
    {#    <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap_ouch.css') }}">#}
{% endblock %}

{% block jumbotron_box %}

{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-2"></div>
            <div class="col-8">
                <div class="page-header">
                    <h1>{{ articles.title }}</h1>
                    <small>发布时间:{{ moment(articles.create_time).format('YYYY年MM月DD日') }}</small>
                </div>
                <div class="page-body">
                    <p>{{ articles.content|cdecode|safe }}</p>
                </div>
                <hr>
                <div class="page-comment">
                    <div class="head" id="comments">下面共有: <b>{{ comments|length }}</b>条评论</div>
                    {% with messages = get_flashed_messages(with_categories=True) %}
                        {% if messages %}
                            {% for category,message in messages %}
                                <div class="alert alert-{{ category }}">
                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                                    {{ message }}
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                    {#                评论#}
                    <form action="{{ url_for('article.detail_index',art_id=articles.id) }}" method="post">
                        <div class="input-group input-group-lg">
                            <div class="input-group">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <input type="text" name="body" class="form-control" placeholder="添加评论">
                                <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit" style="border: #d7dee0 solid 1px">发送评论</button>
                                </span>
                            </div>
                        </div>
                    </form>
                    {% if comments %}
                        {% for comment in comments %}
                            {% if comment.replied_id == None %}
                                <div class="media">
                                    <div class="media-left" style="margin-right: 10px">
                                        <img decoding="async"
                                        {%if comment.author.icon%}
                                             src="{{ url_for("static",filename=comment.author.icon) }}"
                                        {%else%}
                                             src="{{url_for("static",filename="/img/user_icon/sky_window.jpg")}}"
                                        {%endif%}
                                             class="media-object" style="width:60px;height: 60px">
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading"
                                            style="color: #198cbb"><a href="{{ url_for('auth.alter',uuid=comment.author.user_uuid) }}">{{ comment.author.username }}</a></h4>
                                        <p style="color: #0d4e69d1">{{ comment.content }}</p>
                                        {#回复的信息#}
                                        {#{% if comment.replies %}#}
                                        {#{% for reply in comment.replies[::-1] %}#}
                                        {% for reply in comments %}
                                            {% if reply.replied_id == comment.id %}
                                                <div class="replied-box">
                                                    <div class="replied-heading">
                                                        <div class="replied-left" style="margin-right: 10px">
                                                            <img decoding="async"
                                                                 src="
                                                                    {% if reply.author.icon %}
                                                                    {{ url_for('static',filename=reply.author.icon) }}
                                                                    {% else %}
                                                                    {{ url_for('static',filename='img/user_icon/sky_window.jpg') }}
                                                                    {% endif %}"
                                                                 class="replied-object"
                                                                 style="width:60px;height: 60px">
                                                        </div>
                                                        <div class="replied-body" style="min-width: 570px">
                                                            <h6 class="media-heading"><span
                                                                    style="color: #198cbb"><a href="{{ url_for('auth.alter',uuid=reply.author.user_uuid) }}">{{ reply.author.username }}</a></span>&nbsp;回复&nbsp;<span
                                                                    style="color: #198cbb"><a href="{{ url_for('auth.alter',uuid=reply.to_user.user_uuid) }}">{{ reply.to_user.username }}</a></span>:
                                                            </h6>
                                                            <p style="font-size: 15px; color: #0d4e69d1; font-weight: bold">{{ reply.content }}</p>
                                                            {#                                                            是否有回复的回复，如果这条回复被回复了#}
                                                            {#                                                            {% if reply.replies %}#}
                                                            {#                                                                <div>#}
                                                            {#                                                                    {% for reply_eply in reply.replies %}#}
                                                            {#                                                                        这是回复#}
                                                            {#                                                                        <div class="reply_reply">#}
                                                            {#                                                                            <div class="replied-body">#}
                                                            {#                                                                                <h6 class="media-heading"><span#}
                                                            {#                                                                                        style="color: #198cbb">{{ reply_eply.author.username }}</span>&nbsp;回复&nbsp;<span#}
                                                            {#                                                                                        style="color: #198cbb">{{ reply.author.username }}</span>:#}
                                                            {#                                                                                </h6>#}
                                                            {#                                                                                <p style="font-size: 15px; color: #0d4e69d1; font-weight: bold">{{ reply_eply.content }}</p>#}
                                                            {#                                                                            </div>#}
                                                            {#                                                                            <div class="none-div"#}
                                                            {#                                                                                 style="margin: auto"></div>#}
                                                            {#                                                                            <div class="replied-right">#}
                                                            {#                                                                                <small>#}
                                                            {#                                                                                    {{ reply_eply.create_time }}#}
                                                            {#                                                                                </small>#}
                                                            {#                                                                                <input type="hidden"#}
                                                            {#                                                                                       value="{{ reply_eply.id }}"#}
                                                            {#                                                                                       id="reply_id">#}
                                                            {#                                                                                <input type="button" value="回复"#}
                                                            {#                                                                                       class="btn btn-info reply-reply">#}
                                                            {#                                                                            </div>#}
                                                            {#                                                                        </div>#}
                                                            {#                                                                        这是回复的回复#}
                                                            {#                                                                        {% if reply_eply.replies %}#}
                                                            {#                                                                            {% for reply_3 in reply_eply.replies[::-1] %}#}
                                                            {#                                                                                <div class="reply_reply"#}
                                                            {#                                                                                     style="background-color: #c2d1dd96">#}
                                                            {#                                                                                    <div class="replied-body">#}
                                                            {#                                                                                        <h6 class="media-heading"><span#}
                                                            {#                                                                                                style="color: #198cbb">{{ reply_3.author.username }}</span>&nbsp;回复&nbsp;<span#}
                                                            {#                                                                                                style="color: #198cbb">{{ reply_eply.author.username }}->({{ reply_eply.content|truncate(5) }})</span>:#}
                                                            {#                                                                                        </h6>#}
                                                            {#                                                                                        <p style="font-size: 15px; color: #0d4e69d1; font-weight: bold">{{ reply_3.content }}</p>#}
                                                            {#                                                                                    </div>#}
                                                            {#                                                                                    <div class="none-div"#}
                                                            {#                                                                                         style="margin: auto"></div>#}
                                                            {#                                                                                    <div class="replied-right">#}
                                                            {#                                                                                        <small>#}
                                                            {#                                                                                            {{ reply_3.create_time }}#}
                                                            {#                                                                                        </small>#}
                                                            {#                                                                                        <input type="hidden"#}
                                                            {#                                                                                               value="{{ reply_3.id }}"#}
                                                            {#                                                                                               id="reply_id">#}
                                                            {#                                                                                        <input type="button"#}
                                                            {#                                                                                               value="回复"#}
                                                            {#                                                                                               class="btn btn-info reply-reply">#}
                                                            {#                                                                                    </div>#}
                                                            {#                                                                                </div>#}
                                                            {#                                                                            {% endfor %}#}
                                                            {#                                                                        {% endif %}#}
                                                            {##}
                                                            {#                                                                        {% if not loop.last %}#}
                                                            {#                                                                            <hr style="margin: 0">#}
                                                            {#                                                                        {% endif %}#}
                                                            {#                                                                    {% endfor %}#}
                                                            {#                                                                </div>#}
                                                            {#                                                            {% endif %}#}
                                                        </div>
                                                        <div class="none-div" style="margin: auto"></div>
                                                        <div class="replied-right">
                                                            <small>
                                                                {{ reply.create_time }}
                                                            </small>
                                                            <input type="hidden" value="{{ reply.id }}"
                                                                   id="reply_id">
                                                            <input type="hidden" value="{{ comment.id }}"
                                                                   id="comment_id">
                                                            <input type="button" value="回复"
                                                                   class="btn btn-info reply-reply">
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                        {#{% endfor %}#}
                                        {#{% endif %}#}
                                    </div>
                                    <div class="media-right">
                                        <small>
                                            {#moment(articles.create_time).format('YYYY年MM月DD日')#}
                                            {{ comment.create_time }}
                                        </small>
                                        <input type="hidden" value="{{ comment.id }}" id="comment_id">
                                        <input type="button" id="" value="回复" class="btn btn-info">
                                    </div>
                                </div>
                            {% endif %}
                            {% if loop.last %}
                                <br>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
            <div class="col-2"></div>
        </div>
    </div>
    <div class="reply_box divisclose">
        <button type="button" class="div-close" style="font-size: 2.5rem;">&times;</button>
        <form action="{{ url_for('article.send_reply') }}" method="post" class="bs-example bs-example-form"
              style="background-color: #ffffffb0">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3>回复框</h3>
                </div>
                <div class="panel-body">
                    <div class="input-group">
                        <h5></h5>
                        <input type="hidden" value="{{ articles.id }}" name="art_id">
                    </div>
                    <div class="input-group">
                        <label for="replied_body" class="input-group-addon">内容</label>
                        <input id="replied_body" type="text" name="replied_body" class="form-control">
                    </div>
                    <div class="input-group" style="flex-direction: row-reverse;">
                        <button class="btn btn-primary">发送</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        {#        单击回复按钮#}
        $('.media-right input').click(function () {
            var comment_id = $(this).siblings('#comment_id').val();
            var user_name = $(this).parent('.media-right').siblings('.media-body').find('.media-heading').html()
            $(this).parents('div.page-comment').find('input[value="回复"]').attr("disabled", "true");
            $ele = $("body > div.reply_box.divisclose");
            $ele.removeClass("divisclose");
            $ele.animate({
                width: "40%",
                top: "14%",
                right: "30%",
                height: "65%"
            }, 1000);
            $('.input-group h5').html(`回复${user_name}:`);
            var $input = $('<input type="hidden">');
            $input.attr({value: comment_id, name: "comment_id"});
            $ele.children('form').append($input);
        })
        {#单击x按钮#}
        $("body > div.reply_box > button").click(function () {
            $ele = $("body > div.reply_box");
            $ele.stop().css({top: '14%', right: '30%', width: 0, height: 0});
            $ele.addClass("divisclose");
            $('.media input[value="回复"]').removeAttr("disabled");
            $input = $("body > div.reply_box > form > input[type=hidden]");
            $input.remove();
        })
        {#单击回复里面的回复按钮#}
        $('.reply-reply').click(function () {
            var reply_id = $(this).siblings('#reply_id').val();
            var comment_id = $(this).siblings('#comment_id').val();
            {#alert(reply_id);#}
            var user_name = $(this).parent('.replied-right').siblings('.replied-body').children('.media-heading').find('span:first').html();
            $(this).parents('.media').find('input[value="回复"]').attr("disabled", "true");
            $ele = $("body > div.reply_box.divisclose");
            $ele.removeClass("divisclose");
            $ele.animate({
                width: "40%",
                top: "14%",
                right: "30%",
                height: "65%"
            }, 1000);
            $('.input-group h5').html(`回复${user_name}:`);
            var $input = $('<input type="hidden">');
            var $input2 = $('<input type="hidden">');
            $input.attr({value: reply_id, name: "comment_id"});
            $input2.attr({value: comment_id, name: "top_comment_id"});
            $ele.children('form').append($input);
            $ele.children('form').append($input2);
        })
    </script>
{% endblock %}